<template>
  <div class="content">
    <!--列表-->
    <el-row class="mt30">
      <el-col :span="24">
        <el-table
          :data="list"
          size="small"
          border
          :cell-style="$style.cellStyle"
          :header-cell-style="$style.rowClass"
        >
          <ElTableColumn label="服务日期" prop="create_time" />
          <ElTableColumn label="客户姓名" prop="customer_name" />
          <ElTableColumn label="性别" prop>
            <template slot-scope="{ row }">
              <div v-if="row.sex == 1">男</div>
              <div v-if="row.sex == 2">女</div>
              <div v-if="row.sex == 0">未知</div>
            </template>
          </ElTableColumn>
          <ElTableColumn label="年龄" prop="age" />
          <ElTableColumn label="门店" prop="shop_name" />
          <ElTableColumn label="市场" prop="market_name" />
          <ElTableColumn label="服务人员" prop="nurse_id_name" />
          <ElTableColumn label="服务类型" prop="create_time">
            <template slot-scope="{ row }">
              <div v-if="row.sex == 1">按期</div>
              <div v-if="row.sex == 2">按次</div>
            </template>
          </ElTableColumn>
          <ElTableColumn label="服务次数" prop />
        </el-table>
        <pagination
          class="page tc mt10"
          :total="page.total"
          :page.sync="page.page"
          :limit.sync="page.limit"
          @pagination="getList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import pagination from "@/components/Pagination";
import { readServiceList } from "@/api/shop";
class Page {
  total = 0;
  page = 1;
  limit = 10;
}
export default {
  name: "ServeRecord",
  components: {
    pagination
  },
  props: {
    clienId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      page: new Page(), // 分页
      list: [] // 数据展示
    };
  },

  mounted() {
    this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      readServiceList().then(res => {
        this.list = res.list;
        this.page.total = res.dataCount;
      });
    },
    // 点击详情
    tapDetail(id) {
      this.$router.push("./serveDetail?id=" + id + "&clienId=" + this.clienId);
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  height: calc(100% - 56px);
  overflow-y: auto;
}
</style>
